<template>
  <a-list itemLayout="horizontal" :dataSource="data">
    <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
      <a-list-item-meta>
        <a slot="title">{{ item.title }}</a>
        <span slot="description">
          <span class="security-list-description">{{ item.description }}</span>
          <span v-if="item.value">:</span>
          <span class="security-list-value">{{ item.value }}</span>
        </span>
      </a-list-item-meta>
      <template v-if="item.actions">
        <a slot="actions" @click="item.actions.callback">{{ item.actions.title }}</a>
      </template>
    </a-list-item>
  </a-list>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          title: '登录账号',
          description: '唯一登录账号，不可变更',
          value: this.$store.getters.userInfo.loginName
          // actions: {
          //   title: '立即认证',
          //   callback: () => {
          //     this.$router.push({ name: 'RealnameCheck' })
          //   }
          // }
        },
        {
          title: '真实姓名',
          description: '商户姓名',
          value: '~暂未认证',
          actions: {
            title: '立即认证',
            callback: () => {
              this.$router.push({ name: 'RealnameCheck' })
            }
          }
        },
        {
          title: '证件号码',
          description: '身份证号码',
          value: '~暂未认证',
          actions: {
            title: '立即认证',
            callback: () => {
              this.$router.push({ name: 'RealnameCheck' })
            }
          }
        },
        {
          title: '注册手机',
          description: '已绑定手机',
          value: this.formatPhone(this.$store.getters.userInfo.phone),
          actions: {
            title: '修改',
            callback: () => {
              this.$message.info('商户端不支持修改，请联系客服')
            }
          }
        },
        {
          title: '绑定邮箱',
          description: '已绑定邮箱',
          value: this.$store.getters.userInfo.email || '~暂未绑定任何邮箱',
          actions: {
            title: '修改',
            callback: () => {
              this.$message.info('功能暂未开放')
            }
          }
        }
      ]
    }
  },

  methods: {
    formatPhone(phone) {
      var reg = /^(\d{3})\d{4}(\d{4})$/
      phone = phone.replace(reg, '$1****$2')
      return phone
    }
  }
}
</script>

<style scoped lang="scss">
.security-list-value {
  color: #333;
  font-weight: 500;
  padding-left: 20px;
}
.security-list-value {
  color: #1890ff;
}
</style>
